@mixin example-viewer-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  example-viewer {
    .docs-example-viewer-wrapper {
      border: 1px solid rgba(mat-color($foreground, secondary-text), 0.2);
      margin: 4px;
    }

    .docs-example-viewer-title {
      color: mat-color($foreground, secondary-text);
    }

    .docs-example-button {
      color: mat-color($foreground, secondary-text);

      [dir='rtl'] & {
        right: auto;
        left: 8px;
      }
    }

    .docs-example-source {
      overflow: auto;
    }

    code-snippet {
      background: rgba(mat-color($foreground, secondary-text), 0.01);
    }

    .docs-example-viewer-source code-snippet {
      border-bottom: 1px solid mat-color($foreground, divider);
    }
  }
}

